import React, { Component, Fragment } from "react";

// http
import http from '../../../utils/request';
import { Row, Col } from 'antd';


import { DonutChart, Chart, Axis, Interval } from "bizcharts";

class CloudDashboard extends Component {
    constructor(props){
        super(props);
        this.state = {
            account_data: [],
            data1: [
                { year: '1951 年', sales: 38 },
                { year: '1952 年', sales: 52 },
                { year: '1956 年', sales: 61 },
                { year: '1957 年', sales: 45 },
                { year: '1958 年', sales: 48 },
                { year: '1959 年', sales: 38 },
                { year: '1960 年', sales: 38 },
                { year: '1962 年', sales: 38 },
            ]
        }

    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        // 获取分组列表
        http.get('/cloud/dashboard').then(response=>{
            this.setState({
                account_data: response.data.data
            })
        }).catch()
    }

    render(){
        const { account_data } = this.state
        return (
            <Fragment>
                <Row>
                    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                        <DonutChart
                            data={account_data || []}
                            height={350}
                            radius={0.8}
                            angleField="value"
                            colorField="platform"
                            pieStyle={{ stroke: "white", lineWidth: 3 }}
                        />
                    </Col>
                    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 10, offset: 2 }}>
                        <Chart height={300} autoFit data={account_data} >
                            <Axis name='platform' label={{ autoHide: false, autoRotate: false }} />
                            <Interval position="platform*value" />
                        </Chart>
                    </Col>
                </Row>
            </Fragment>
        )
    }
}
export default CloudDashboard;